<template>
    <div class='foot'>
        <div class="addserve" :style='{top:styleall}'>
            <el-button @click="addserve" class="fr" size="small" type="primary">保存</el-button>
        </div>
        <el-form ref="form" class="resform" label-width="120px">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>底图</span>
                </div>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="banner图一">
                            <uploadItem @openimg='openimg' :item='foot' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="banner图二">
                            <uploadItem @openimg='openimg' :item='foot' :imgname="'img2'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>项目logo</span>
                </div>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="logo图">
                            <uploadItem @openimg='openimg' :item='foot' :imgname="'img3'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
        </el-form>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import uploadItem from "@/views/web/components/uploadItem";
import { selectPages,addPageValue,updatePageValue} from "@/api/pc.js"
export default {
    data(){
       return{
        uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
        headers: {
            Authorization: "Bearer " + getToken()
        },
        // 图片弹窗
        dialogVisible:false,
        // 弹窗图片地址
        dialogImageUrl:'',
        // 底部  -- img3 logo图
        foot:{img1:'',img2:'',img3:''},
        // 编辑
        edit:false,
        // 编辑
        pageId:'',
        // 样式
        styleall:{},
       }
    },
    components:{uploadItem},
    mounted(){this.getdata();window.addEventListener('scroll',this.handleScroll);},
    methods:{
         // 滚动事件
        handleScroll(){
            // 滚动条偏移量
            let scrollTop = document.documentElement.scrollTop;
            if(scrollTop>80){this.styleall ='0px';}else{ this.styleall =(80 - scrollTop) +'px'; }
        },
        // 保存
        addserve(){
            let objall = {
                foot:this.foot,
            }
            let obj={pageName:'底部',pageType:'foot',pageValue:JSON.stringify(objall),}
            if(!this.edit){
                addPageValue(obj).then(res=>{
                    console.log(res)
                    if(res.code==200){this.$message.success('保存成功！')}
                })
            }else{
                obj.pageId = this.pageId;
                updatePageValue(obj).then(res=>{
                    console.log(res)
                    if(res.code==200){this.$message.success('更新成功！')}
                })
            }
        },
        // 获取数据
        getdata(){
            selectPages({pageType:'foot'}).then(res=>{
                if(res.code==200){
                    console.log(JSON.parse(res.data[0].pageValue))
                    if(res.data.length==0){
                        this.edit = false;
                    }else{
                        this.edit = true;
                        this.pageId = res.data[0].pageId;
                        let obj = JSON.parse(res.data[0].pageValue);
                        this.foot=obj.foot;
                    }
                }
            })
        },
        // 打开全屏图片
        openimg(val){
            this.dialogImageUrl = val;
            this.dialogVisible = true;
        },
    }
}
</script>
<style lang='scss' scoped>
.foot{
    width: 100%;
    height: 100%;
    padding: 20px;
    padding-top: 50px;
}
.addserve{
    width: 100%;
    height: 40px;
    position: fixed;
    top:80px;
    left: 0;
    background-color: #fff;
    padding-right: 30px;
    z-index: 101;
    button{
        margin-top: 4px;
        width: 100px;
    }
}
</style>